<template>
    <section>
        <div class="tab-content">
            <h2> 分享背景</h2>
        </div>
        <component :is="type && list[type]['com']" :data="data" @changeTab="tab" @change="changeData"></component>
    </section>
</template>

<script>
import sharebg from "../Edit/sharebg";
import sharebox from "../Edit/sharebox";



export default {
    name: "EditForm",
    components: {
        sharebg,
        sharebox


    },
    props: {
        data: {
            type: Object,
            default: () => { },
        },
    },
    data() {
        return {
            type: "sharebg",
            vip: 0,//角色权限
            list: {
                sharebg: {
                    tit: "分享背景",
                    com: "sharebg",
                },
                sharebox: {
                    tit: "二维码",
                    com: "sharebox",
                },

            },
            tabType: {
                1: true,
                2: false,
                3: false,
                4: false,
                5: false,
                6: false,
            },
        };
    },
    watch: {
        data: {
            handler(newData, oldData) {
                // 检查 tabType 是否发生了变化
                console.log(this.data, " 检查 tabType 是否发生了变化  ");
            },
            // 开启深度监听
            deep: true,
        },
    },
    mounted() {

        let userinfo = JSON.parse(localStorage.getItem('admin_sys'))
        this.vip = userinfo.vip
        this.type = this.data.type;
        if (this.data.tabType) {
            this.tab(this.data.tabType);
        }
    },
    methods: {
        tab(key) {
            for (let i in this.tabType) {
                if (key == i) {
                    this.tabType[key] = true;
                    this.$set(this.data, "tabType", key);
                    this.data.tabType = key;
                } else {
                    this.tabType[i] = false;
                }
            }
        },


        //修改的数据
        changeData(data) {
            this.$emit("changeData", data)
        }
    },
};
</script>

<style scoped lang="scss">
section {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
}

.tab-content {
    padding: 0 15px;

    h2 {
        font-size: 16px;
        color: #333;
    }

    .tab {
        display: flex;
        justify-content: space-around;
        border: 1px solid #ddd;
        border-radius: 6px;

        span {
            width: 33.33%;
            text-align: center;
            font-size: 14px;
            color: #666;
            display: block;
            height: 36px;
            line-height: 36px;
            cursor: pointer;

            &.active {
                color: #fff;
                background: #409eff;
                border-radius: 2px;
            }

            &:nth-of-type(2) {
                border-left: 1px solid #ddd;
                border-right: 1px solid #ddd;
            }
        }
    }
}
</style>
